<script setup lang="ts">
const props = defineProps({
  circle: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '50px'
  },
  height: {
    type: String,
    default: '50px'
  },

  bgColorMax: {
    type: String,
    default: '#EBEBEB'
  },
  bgColorMin: {
    type: String,
    default: '#EBEBEB'
  }
})

let height = props.height
let width = props.width
// 大背景
let bgColorMax = props.bgColorMax
// 子背景
let bgColorMin = props.bgColorMin

</script>
    
<template>
  <div class="skeleton" :class="{ circle }">
    <slot></slot>
  </div>
</template>
    
<style scoped lang="scss">
.skeleton {
  height: v-bind(height);
  width: v-bind(width);
  background-color: v-bind(bgColorMax);
  animation: opacity 0.8s infinite;
}

@keyframes loading {
  0% {
    background-size: 300% 100%;
    background-image: linear-gradient(100deg, #eee 40%, #fff 50%, #eee 60%);
    background-position: 100% 50%;
  }

  100% {
    background-size: 300% 100%;
    background-image: linear-gradient(100deg, #eee 40%, #fff 50%, #eee 60%);
    background-position: 0 50%;
  }

}

@keyframes loading-transform {
  0% {
    transform: skewX(-10deg) translateX(-100%);
  }

  100% {
    transform: skewX(-10deg) translateX(200%);
  }
}



@keyframes opacity {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}


.circle {
  border-radius: 50%;
}
</style>